Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve RecordShowPage Header performances #6440

Merged
merged 1 commit into from
Jul 29, 2024
Merged

Conversation

charlesBochet
Copy link
Member

In this PR, I am:

  • removing a useEffect (we use the onCompleted prop of useFindManyQuery hook)
  • moving this logic into a RecordShowPageHeader to avoid re-renders of the whole tree

Copy link
Contributor

@greptile-apps greptile-apps bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

PR Summary

This PR focuses on enhancing the performance of the RecordShowPage header by refactoring and optimizing the logic.

  • Removed useEffect in useRecordShowPagePagination.ts: Utilized onCompleted prop of useFindManyRecords to set totalCount state, reducing unnecessary re-renders.
  • Refactored RecordShowPage.tsx: Introduced RecordShowPageHeader component to encapsulate header logic, isolating state and logic to prevent full-page re-renders.
  • Added RecordShowPageHeader.tsx: New component to manage header logic and pagination, improving performance by isolating state and logic.

3 file(s) reviewed, 2 comment(s)
Edit PR Review Bot Settings

}: {
objectNameSingular: string;
objectRecordId: string;
headerIcon: React.ComponentType;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Spelling: The headerIcon prop is defined but not used in the component. It should be removed from the props list.

navigateToIndexView,
} = useRecordShowPagePagination(objectNameSingular, objectRecordId);

const { headerIcon } = useRecordShowPage(objectNameSingular, objectRecordId);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Logic: Redundant call to useRecordShowPage for headerIcon. This can be optimized by passing headerIcon directly as a prop from the parent component.

@charlesBochet charlesBochet merged commit d2fe310 into main Jul 29, 2024
6 of 10 checks passed
@charlesBochet charlesBochet deleted the recordshow-perfo branch July 29, 2024 16:11
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants